<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Universion-X</title>
	<!-- 公共css -->
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/public.css">
	<link rel="stylesheet" href="layui/css/layui.css">
	<!-- index.css -->
	<link rel="stylesheet" href="css/package.css">
</head>
<body>
	<!-- 头部 -->
	<div class="header">
		<div class="header_top">
			<img src="img/shouye_logo@2x.png" class="header_top_left">
			<div class="header_top_right">
				<p class="header_top_right_active">首页</p>
				<p>最新消息</p>
				<p>交易</p>
				<p>公司钱包</p>
			</div>
		</div>
		<!-- Swiper -->
	    <div class="swiper-container">
	        <div class="swiper-wrapper">
	            <div class="swiper-slide">
	            	<img src="img/shouye_banner@2x.png" class="slide_img">
	            </div>
	            <div class="swiper-slide">
	            	<img src="img/shouye_banner@2x.png" class="slide_img">
	            </div>
	            <div class="swiper-slide">
	            	<img src="img/shouye_banner@2x.png" class="slide_img">
	            </div>
	        </div>
	        <div class="swiper-button-next"></div>
	        <div class="swiper-button-prev"></div>
	    </div>
    </div>
    <!-- 头部结束 -->
    <!-- 中间部分 -->
    <div class="content_index">
    	<div class="index_mid">
			<div class="index_mid_left">
				<img src="img/sousuo_touxiang@2x.png" class="index_toux">
				<p class="index_zh">18166668888</p>
				<a href="changepass.html"><p class="index_change">修改密码</p></a>
				<div class="index_nav">
					<div class="index_nav_one">
						<img src="img/icon-xinxi@2x.png">
						<p>基本信息</p>
					</div>
					<div class="index_nav_one_active">
						<img src="img/icon_qianbao@2x_select.png">
						<p>我的钱包</p>
					</div>
					<div class="index_nav_one">
						<img src="img/icon_zubie@2x.png">
						<p>我的组别</p>
					</div>
					<div class="index_nav_one">
						<img src="img/icon_touzi@2x.png">
						<p>我的投资</p>
					</div>
				</div>
			</div>
			<div class="index_mid_right">
				<div class="hometit"><p>我的钱包 <span> / MY WALLET</span></p></div>
				<div class="package">
					<div class="package_zichan">
						<img src="img/icon_zichan@2x.png">
						<p>我的资产：¥ 1000</p>
					</div>
					<p class="package_mingxi">个人收入/支出明细</p>
					<div class="package_mingxi_all">
						<div class="package_mingxi_one">
							<img src="img/icon_jijin@2x.png" class="package_mingxi_one_left">
							<div class="package_mingxi_one_right">
								<div class="package_jijin">
									<p class="package_jijin_top">基金</p>
									<p class="package_jijin_bot">2018-05-06</p>
								</div>
								<p class="package_jijin_right">+100</p>
							</div>
						</div>
						<div class="package_mingxi_one">
							<img src="img/icon_baoxin@2x.png" class="package_mingxi_one_left">
							<div class="package_mingxi_one_right">
								<div class="package_jijin">
									<p class="package_jijin_top">保险</p>
									<p class="package_jijin_bot">2018-05-06</p>
								</div>
								<p class="package_jijin_right">+100</p>
							</div>
						</div>
						<div class="package_mingxi_one">
							<img src="img/icon_lingshou@2x.png" class="package_mingxi_one_left">
							<div class="package_mingxi_one_right">
								<div class="package_jijin">
									<p class="package_jijin_top">零售</p>
									<p class="package_jijin_bot">2018-05-06</p>
								</div>
								<p class="package_jijin_right">+100</p>
							</div>
						</div>
						<div class="package_mingxi_one">
							<img src="img/icon_shangcheng@2x.png" class="package_mingxi_one_left">
							<div class="package_mingxi_one_right">
								<div class="package_jijin">
									<p class="package_jijin_top">商城</p>
									<p class="package_jijin_bot">2018-05-06</p>
								</div>
								<p class="package_jijin_right">+100</p>
							</div>
						</div>
						<div class="package_mingxi_one">
							<img src="img/icon_jijin@2x.png" class="package_mingxi_one_left">
							<div class="package_mingxi_one_right">
								<div class="package_jijin">
									<p class="package_jijin_top">基金</p>
									<p class="package_jijin_bot">2018-05-06</p>
								</div>
								<p class="package_jijin_right">+100</p>
							</div>
						</div>
					</div>
					<!-- 分页 -->
					<div class="package_page">
						<div id="pages"></div>
					</div>
				</div>
			</div>
    	</div>
    </div>
    <!-- 中间部分结束 -->
    <!-- 尾部 -->
    <div class="footer">
    	<div class="footer_mid">
	    	<p>版权所有@universion</p>
	    	<p>地址：大连市甘井子区888号</p>
	    	<p>联系电话：+86 0411-6859786</p>
	    	<p>辽公网安备2102113658008</p>
	    </div>
    </div>
    <!-- 尾部结束 -->
</body>
	<script src="layui/layui.js"></script>
	<script src="js/jquery-2.1.1.min.js"></script>
	<script src="js/swiper.min.js"></script>
	<script>
		// 轮播
	    var swiper = new Swiper('.swiper-container', {
	        pagination: '.swiper-pagination',
	        nextButton: '.swiper-button-next',
	        prevButton: '.swiper-button-prev',
	        paginationClickable: true,
	        spaceBetween: 0,
	        centeredSlides: true,
	        autoplay: 4000,
	        loop:true,
	        autoplayDisableOnInteraction: false
	    });
	    $('.index_nav_one').mouseover(function(){
			var imgStr =  $(this).find('img').attr('src');
			var arrStr = imgStr.split('.png',1);
			var changeImg = arrStr+ '_select.png';
			$(this).find('img').attr('src',changeImg);
		}).mouseout(function(){
			var imgStr =  $(this).find('img').attr('src');
			var arrStr = imgStr.split('_select.png',1);
			var changeImg = arrStr+ '.png';
			$(this).find('img').attr('src',changeImg);
		})
		// 分页
		layui.use(['laypage', 'layer'], function(){
			var laypage = layui.laypage
			,layer = layui.layer;
			//自定义样式
			laypage.render({
				elem: 'pages'
				,count: 100
				,theme: '#1F3861'
				,limit: 5
				,jump: function(obj){
					console.log(obj.curr)
				}
			});
		})
	    // 登录
	    function login(){
	    	layui.use('layer', function(){
				var layer = layui.layer;
				layer.msg('登陆成功');
			});  	    
	    }
    </script>
</html>